<template>
	<view class="index">
		<view class="resume"><text>速投简历，加入我们~</text></view>
		<view class="carousel">
			<swiper autoplay interval="5000" indicator-dots circular indicator-color="white"
				indicator-active-color="red">
				<swiper-item>
					<image src="../../static/images/1.png" mode="widthFix"></image>
				</swiper-item>
				<swiper-item>
					<image src="../../static/images/2.png" mode="widthFix"></image>
				</swiper-item>
				<swiper-item>
					<image src="../../static/images/3.png" mode="widthFix"></image>
				</swiper-item>
				<swiper-item>
					<image src="../../static/images/4.png" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="tab">
			<view class="tab_item" v-for="(p,index) in tab" @click="toDetail(p.pageName)" :key="p.id">
				<view class="item_img">
					<image :src="`../../static/images/${p.name}.png`"></image>
				</view>
				<view class="item_title">
					{{p.title}}
				</view>
			</view>
		</view>



		<view class="detail">
			<ul>
				<li v-for="(p,index) in enrollingdetails" :key="index"><text
						class="detail_title">{{p.title}}</text>&nbsp&nbsp<text
						class="detail_content">{{p.content}}</text>
				</li>
			</ul>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab: [{
					id: 1,
					title: "优秀学长",
					name: "greatSenior",
					pageName: "GreatSenior"
				}, {
					id: 2,
					title: "历史项目",
					name: "pastProducts",
					pageName: "PastProducts",
				}, {
					id: 3,
					title: "招新题目",
					name: "newTopic",
					pageName: "NewTopic"
				}],
				enrollingdetails: [{
						title: "面试日期:",
						content: "2023-4-25",
					},
					{
						title: "面试地点:",
						content: "大学生创新创业孵化楼1楼",
					},
					{
						title: "面试具体时间:",
						content: "10.00-14.00",
					},
					{
						title: "面向专业:",
						content: "计算机、通信",
					},
					{
						title: "招新人数:",
						content: "40人",
					},
					{
						title: "注意事项:",
						content: "请各位同学拿好自己的简历在门口安静等待，按顺序一次进入教室，每个人的时间最多8分钟"
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			toDetail(data) {
				uni.navigateTo({
					url: `/pages/${data}/${data}`
				})
			}
		}
	}
</script>
<style>
	* {
		padding: 0;
		margin: 0;
	}

	.index {
		width: 90%;
		height: 700rpx;
		margin: 0 auto;
	}

	.carousel {
		margin-top: 30rpx;
		width: 100%;
		height: 300rpx;
	}


	.tab {
		margin-top: 30rpx;
		width: 100%;
		height: 100rpx;
		text-align: center;
	}

	.tab_item {
		float: left;
		padding: 20rpx;
		width: 26%;
		height: 100%;
		font-family: '黑体';
		color: #585858;
	}

	.tab_item .item_img {
		margin: 0 auto;
		width: 36rpx;
		height: 36rpx;
		vertical-align: middle;
	}

	.tab_item .item_img image {
		width: 100%;
		height: 100%;
	}

	.resume {
		width: 100%;
		height: 80rpx;
		margin-top: 10rpx;
		text-align: center;
		line-height: 80rpx;
	}

	.detail {
		width: 100%;
		height: 700rpx;
		border: 1px solid #cdd1d6;
		margin-top: 30rpx;
	}

	.detail li {
		padding: 20rpx;
	}

	.detail_title {
		font-weight: 700;
	}

	.detail_content {
		color: #6b7380;
		font-family: "宋体";
		margin-left: 30rpx;
	}
</style>